<template>

    <div class="container">
      <div class="row1">
        <PanelGroup></PanelGroup>
      </div>

      <div class="row2">
        <div class="cell"><RingChart></RingChart></div>
        <div class="cell"><BarChart></BarChart></div>
      </div>
    </div>

</template>

<script setup lang="ts">
import RingChart from './components/RingChart.vue'; // 修改密码组件 ++++
import BarChart from './components/BarChart';
import PanelGroup from './components/PanelGroup.vue'
export default {
  components: {
    RingChart,
    BarChart,
    PanelGroup
  }
};
</script>
<style>
* {
  list-style: none;
  box-sizing: border-box;
}
.container {
  margin-top: 100px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  }
  .row1 {
    width: 80%;
    height: 200px;
   margin: 0 auto;
    color: black;
    flex-direction: column;
  }

  .row2 {
    width: 90%;
    height: 50%;
    margin-left: 80px;
    display: flex;
    color: black;
  }
  .cell {
    flex: 1;
  }

</style>
